<!--Redis信息-->
<template>
  <div class="app-container">
    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <el-alert
          type="success"
          show-icon
          :closable="false">
          <div slot="title">
            上次更新时间：{{ updateTime | formatDate(T.DATE_TIME_FMT1) }}
            <el-divider direction="vertical" />
            <el-link type="primary" :underline="false" @click="handleClickUpdate">立即更新</el-link>
          </div>
        </el-alert>
      </div>
      <el-row :gutter="20" style="margin:0">
        <el-col :span="12">
          <el-card class="box-card" style="height:400px">
            <div ref="commandStats" style="height: 100%;width:100%" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" style="height:400px">
            <div id="usedMemory" style="height: 100%;width:100%" />
          </el-card>
        </el-col>
      </el-row>

      <el-card class="box-card" style="margin: 10px 10px;">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <table cellspacing="0" style="width: 100%">
            <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.redis_version }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.tcp_port }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.connected_clients }}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.uptime_in_days }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.used_memory_human }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.maxmemory_human }}</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.rdb_last_bgsave_status }}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.dbSize" class="cell">{{ cache.dbSize }} </div></td>
                <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
                <td class="el-table__cell is-leaf"><div v-if="cache.info" class="cell">{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-card>

    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      updateTime: new Date().getTime(),
      // cache信息
      cache: {},
      interval: null

    }
  },
  destroyed() {
    if (this.interval) {
      window.clearInterval(this.interval)
    }
  },
  created() {
    this.loadRedisInfo()
    /* this.interval = window.setInterval(() => {
      this.loadRedisInfo()
    }, 1000)*/
  },
  mounted() {
  },
  methods: {
    handleClickUpdate() {
      this.loadRedisInfo()
    },
    loadRedisInfo() {
      this.updateTime = new Date().getTime()
      this.$store.dispatch('monitorRedis').then(res => {
        this.cache = res
        console.log(this.cache)
        this.$nextTick(() => {
          this.initUsedMemoryEchart()
          this.initCommandStatsEchart()
        })
      }).catch((err) => { console.log(err) })
    },
    initUsedMemoryEchart() {
      var usedMemory = this.$echarts.init(document.getElementById('usedMemory'))
      usedMemory.showLoading()
      const colors = ['#67E0E3', '#37A2DA', '#FD666D']

      var option = {
        tooltip: {
          formatter: '{b} <br/>{a} : ' + this.cache.info.used_memory_human
        },
        series: [{
          name: '峰值',
          type: 'gauge',
          center: ['50%', '50%'], // 仪表位置
          radius: '85%', // 仪表大小
          min: 0,
          max: 1000,
          axisLine: {
            // 仪表盘
            lineStyle: {
              width: 15,
              color: [
                [0.2, colors[0]],
                [0.8, colors[1]],
                [1, colors[2]]
              ]
            }
          },
          splitLine: {
            // 分隔线样式
            length: '10%'
          },
          pointer: {
            // 仪表盘指针
            icon: 'none',
            width: 5,
            length: '85%'
          },

          detail: {
            // 仪表盘 显示数据
            formatter: this.cache.info.used_memory_human,
            fontWeight: 'bold'

          },
          data: [{
            value: parseFloat(this.cache.info.used_memory_human),
            name: '内存消耗'
          }]
        }]
      }
      usedMemory.hideLoading()
      usedMemory.setOption(option)
    },
    initCommandStatsEchart() {
      var commandStats = this.$echarts.init(this.$refs.commandStats)
      commandStats.showLoading()

      const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
      var option = {
        color: color,
        title: [{
          text: '{val|命令统计}',
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 'normal',
                color: '#666666',
                padding: [10, 0]
              },
              val: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333333'
              }
            }
          }
        }, {
          top: 20,
          left: 20,
          textStyle: {
            fontSize: 14,
            color: '#666666',
            fontWeight: 400
          }
        }],
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: ['45%', '55%'],
          center: ['50%', '50%'],
          data: this.cache.commandStats,
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderColor: '#fff',
              borderWidth: 2
            }
          },
          labelLine: {
            normal: {
              length: 10,
              length2: 20,
              lineStyle: {
                width: 1
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
              },
              a: {
                padding: [-30, 15, -20, 15]
              }
            }
          }
        }]
      }
      commandStats.hideLoading()
      commandStats.setOption(option)
    }
  }

}
</script>
